<!-- 页面 -->
<template>
    <div class="shou">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img
                    src="http://120.53.31.103:84/uploads/image/2021-09-08/zP1osWNNxyfKSX1Dt6IDUUh5Vpz8AxD39BBaQECW.jpeg"
                    alt=""></van-swipe-item>
            <van-swipe-item><img
                    src="http://120.53.31.103:84/uploads/image/2021-09-08/lXEERcH4CIb3reka5yruT7RW7jMD4K7vreK6utgq.jpeg"
                    alt=""></van-swipe-item>
            <van-swipe-item><img
                    src="http://120.53.31.103:84/uploads/image/2021-09-08/pihYvxiYLTL5XCVs0sMFzlvY2TfSUj95Tz0IWjgF.jpeg"
                    alt=""></van-swipe-item>
        </van-swipe>
        <van-grid class="baab">
            <van-grid-item class="aa" icon="photo-o" to="/ke" text="特色课" />
            <van-grid-item class="aa" icon="photo-o" to="/yidui" text="一对一辅导" />
            <van-grid-item class="aa" icon="photo-o" to="/ri" text="学习日历" />
        </van-grid>

            <div class="ttt" v-for="(item,index) in list" :key="index">
                <p><div class="aa"></div>{{ item.title }}</p>
                    <div class="aaa" v-for="(item1,index1) in item.teachers_list" :key="index1">
                        <img :src="item1.teacher_avatar" alt="">
                        {{ item1.teacher_name }}
                    </div>
            </div>


        <van-sticky :offset-top="600">
            <you></you>
        </van-sticky>
        <xia co=0></xia>
    </div>
</template>
<!-- vue -->
<script>
import you from '@/components/you.vue'
import xia from '@/components/xia.vue'

export default {
    components: {
        you,
        xia,
    },
    data() {
        return {
            // 声明的属性
            list:[],
            co:0,
        }
    },
    //生命周期函数
    mounted() {
        this.$axios.get('http://120.53.31.103:84/api/app/courseBasis').then(res => {
            this.list=res.data.data.list
            console.log(this.list);
        })
    },
    // 调用方法
    methods: {
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.shou{
    width: 100%;
    height: 100%;
}
.my-swipe img {
    width: 100%;

}

.baab .aa {
    width: 100px;
    height: 100px;
    margin-top: -30px;
    margin-left: 20px;
}
.ttt{
    width: 80% ;
    margin: auto;
    
}
.ttt .aa{
    width: 5px;
    height: 25px;
    float: left;
    background-color: red;
}
.ttt .ttqq{
    width: 100%;
    height: 100px;
    background: red;
}
.ttt .aaa{
    width: 90%;
    height: 100px;
    /* background-color: aqua; */
    margin-top: 20px;
}
.ttt .aaa img {
    width: 50px ;
    height: 50px ;
}
</style>